import _Image from "./image"
import _Font from "./font"
import _Path from "./path"
import _Gradient from "./gradient"
var defaultCanvas = wx.createCanvas()
var ctx = defaultCanvas.getContext("2d")
var Pi = 3.141592653
export default class graphics{
  constructor(){
    this.defaultCanvas = defaultCanvas
    this.defaultCtx = ctx
    this.x = 0
    this.y = 0
    this.info = wx.getSystemInfoSync()
    this.w = defaultCanvas.width
    this.h = defaultCanvas.height
    this.setDesignResolution(1600,900)
    this.ctx = this.defaultCtx
    //console.log(this.ctx)
    //console.log(defaultCanvas)
    this.backgroundColor = "#000000"
    this.setFont(this.newFont(20))
    this.dashOffset = 0
    this.ctx.imageSmoothingEnabled = false
  }

  ///////////////////////////
  getDimensions(){
    return { w : this.w,
            h : this.h}
  }
  ////////////////COLOR/////////////////////
  setBackgroundColor(color){
    this.backgroundColor = color
  }
  getBackgroundColor(){
    return this.backgroundColor
  }
  int2str(num){
    if (!num) {return "FF"}
    let str = num.toString(16)
    str = str.length == 1 ? "0"+str : str
    return str
  }
  rgbToStr(color){
    return "#" + this.int2str(color.r) + this.int2str(color.g) + this.int2str(color.b) + this.int2str(color.a)
  }
  setColor(color){
    if (typeof(color) == "string") {
      this.ctx.fillStyle = color
      this.ctx.strokeStyle = color
    } else {
      let a = color.a
      /*
      if (this.info.platform == "devtools") {
        a = a/255
      } 
      */
      color = "rgba(" + color.r + ", " + color.g + ", " + color.b + ", " + a  + ")"
      this.ctx.fillStyle = color
      this.ctx.strokeStyle = color
    }
  }
  setFillColor(color){
    this.ctx.fillStyle = color
  }
  setStrokeColor(color){
    this.ctx.strokeStyle = color
  }
  //////////////////////////// stack ctrl/////////////////////////
  push(){
    return this.ctx.save()
  }
  pop(){
    return this.ctx.restore()
  }
  ////////////////////////// line style/////////////////////////
  setLineWidth(w){
    this.ctx.lineWidth = w / this.adjustScale.x
  }
  setLineCap(s){
    this.ctx.lineCap = s //"butt", "round", and "square".   
  }
  setLineJoin(s){
    this.cureentCtx.lineJoin = s //"bevel", "round", and "miter"
  }
  setMiterLimit(v){
    this.ctx.miterLimit = v
  }
  setLineDash(seg){
    this.dashSeg = seg
    //console.log(this.ctx.setLineDash,this.ctx.lineDashOffset)
    //this.ctx.setLineDash(seg)  //[5,10]
    //this.ctx.lineDashOffset(seg,0)
  }
  setLineDashOffset(v){
    this.dashOffset = v
    //console.log(this.ctx.setLineDash, this.ctx.lineDashOffset)
    //this.ctx.lineDashOffset = v
  }
  //////////////////////////text style///////////////////////////
  setFont(font){
    this.font = font
    this.font.ctx = this.ctx
    this.ctx.font = font.style
  }
  getFont(){
    return this.font
  }

  setTextAlign(s){
    this.ctx.textAlign = s //"start", "end", "left", "right", and "center"
  }
  setTextBaseLine(s){
    this.ctx.textBaseLine = s //top hanging middle alphabetic ideographic bottom
  }
  ////////////////SHAPE/////////////////////////////////////
  line(x1,y1,x2,y2){
  
      this.ctx.beginPath()
      this.ctx.moveTo(x1, y1)
      this.ctx.lineTo(x2, y2)
      this.ctx.stroke()
  
  }
  bezierCurve(x1, y1, x2, y2, cp1x, cp1y, cp2x, cp2y) {
    this.ctx.beginPath()
    this.ctx.moveTo(x1, x2)
    this.ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2)
    this.ctx.stroke()
  }


  circle(t,x,y,r){
    if(t == "line"){
      this.ctx.beginPath()
      this.ctx.moveTo(x+r, y)
      this.ctx.arc(x, y, r, 0, 2 * Pi)
      this.ctx.stroke()
    }else{
      this.ctx.beginPath()
      this.ctx.moveTo(x + r, y)
      this.ctx.arc(x, y, r, 0, 2 * Pi)
      this.ctx.fill()
    }
    
  }
  rectangle(t, x, y, w, h) {
    if (t == "fill") {
      this.ctx.fillRect(Math.floor(x), Math.floor(y), Math.floor(w), Math.floor(h))
    } else {
      this.ctx.strokeRect(Math.floor(x), Math.floor(y), Math.floor(w), Math.floor(h))
    }
  }
////////////////////////////////COORDINATE/////////////////////////////
  translate(x,y){
    this.ctx.translate(x,y)
  }
  rotate(r){
    this.ctx.rotate(r)
  }
  scale(sx,sy){
    this.ctx.scale(sx,sy)
  }
  transform(a,b,c,d,e,f){
    this.ctx.transform(a, b, c, d, e, f)
  }

  setTransform(a, b, c, d, e, f){
    this.ctx.setTransform(a, b, c, d, e, f)
  }
  origin(){
    this.setTransform(1,0,0,1,0,0)
  }

  setDesignResolution(w,h){
    this.screenResolution = this.getDimensions()
    this.designResolution = {w : w,h : h} 
    this.adjustScale = {
      x: this.screenResolution.w / this.designResolution.w,
      y: this.screenResolution.h / this.designResolution.h,
    }
    
  }

  applyResolutionAdjust(){
    if (this.designResolution){
      this.scale(this.adjustScale.x,this.adjustScale.y)
    }
  }
////////////////////////////RENDER////////////////////////////
  clear(color){
    this.ctx.clearRect(this.x, this.y, this.w, this.h)
    this.setColor(color)
    this.ctx.fillRect(this.x, this.y, this.w, this.h)
  }
/*
scale(sx,sy) = matrix(sx,0,0,sy,0,0)
rotate(θ) = matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
skew(θx,θy) = matrix(1,tan(θy),tan(θx),1,0,0)
translate(tx,ty) = matrix(1,0,0,1,tx,ty)
 */

  draw(obj,x=0,y=0,rot=0,sx=1,sy=1){
    this.push()
    this.ctx.translate(x,y)
    this.ctx.rotate(rot)
    this.ctx.scale(sx,sy)
    obj.render(this.ctx)
    this.pop()
  }
  print(text,x,y,limit){
    this.ctx.fillText(text,Math.floor(x),Math.floor(y),limit)
  }
  printOutline(text, x, y, limit){
    this.ctx.strokeText(text, Math.floor(x), Math.floor(y), limit)
  }
 

  ////////////////////////////IMAGE///////////////////////////////////
  newImage(path,x,y,w,h){
    return new _Image(path,x,y,w,h)
  }


  /////////////////////////////FONT//////////////////////////////////
  newFont(size,path){
    let font = new _Font(size,path,ctx)
    return font
  }




  ///////////////////////////PATH///////////////////////////////////
  newPath(verts){
    return new _Path(verts)
  }
  setPath(path){
    this.ctx.beginPath()
    var p = path.verts
    this.ctx.moveTo(p[0],p[1])
    for (var i = 2;i<p.size;i+=2){
      this.ctx.lineTo(p[i],p[i+1])
    }
    this.ctx.closePath()
  }
  cutPath(path){
    this.setPath(path)
    this.ctx.clip()
  }
  /////////////////////image data //////////////////////
  newImageData(w,h){
    return new _ImageData(this,null,null,null,w,h)
  }
  newImageDataByCanvas(x,y,w,h){
    return new _ImageData(this, null, x, y, w, h)
  }
  copyImageData(imagedata){
    return new _ImageData(this, imagedata)
  }
  pasteImageData(imagedata,dx,dy,sx,sy,sw,sh){
    this.ctx.putImageData(imagedata, dx, dy, sx, sy, sw, sh)
  }
}